<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title妮妮</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  background:url("https://wx4.sinaimg.cn/mw690/007E4saegy1g24tv1joc5j30u00u079f.jpg");
position: relative;
  border:1px solid #B0E0E6;
  width:400px;
  height:300px;
  margin:200px;
  
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path transform=""
        d="M0,0 Q50,60 80,140 T340,100"
        stroke="#B0E0E6"
        stroke-width="6"
        fill="none" />
  <animateMotion
                 xlink:href="#ant"
                 path="M0,0 Q50,60 80,140 T340,100"
                 dur="10s"
                 begin="click"
                 fill="freeze">
  </animateMotion> 
  <g id="ant">
    <circle
		  fill="transparent"
          fill-opacity="0.5"
          cx="0" cy="0"
          r="20"/>
	  <image x="-12"  y="-20"  rx="0" ry="0" width="70" height="70" 
        href="https://hbimg.huabanimg.com/b83a908b865bde7f142e68ddfcafb071157a79f49c865-EEAeDy_fw658">
</image>
    <circle
          fill="transparent"
          cx="0" cy="0"
          r="3"/>
  </g>
</svg>          
</body>
</html>